<script setup>
import api from '../api/Post_api.js'
import { computed, ref, onMounted } from 'vue'
import lodash from "lodash";
import {ElMessage} from "element-plus";


// 修改点1：初始化tableData结构，确保有data数组
const tableData = ref({
  data: []  // 确保这里包含data数组，与API返回结构匹配
});
const editWinVisible = ref(false);
const total = ref(50);      // 总数据条数

//查询数据
const serchObj = ref({
  current:1,
  limit:10,
  total:0,
  userId:'',
  typeId:'',
  postTitle:'',
  postContent:'',
  postSummary:'',
  status:'',
  isVisible:''
})


const obj =ref({});

onMounted(async ()=>{
  sear();
});

const sear = async()=>{
  const res = await api.page(serchObj.value);
  tableData.value.data = res.data;
  tableData.value.count = res.count;
  total.value=res.count;
  console.log("切换到页码:");
}
const search = ref('')

const filteredData = computed(() =>
    tableData.value.data.filter(
        (item) =>
            !search.value ||
            (item.name && item.name.toLowerCase().includes(search.value.toLowerCase()))
    )
)
const handlerSearch=()=>{
  serchObj.value.current=1;
  sear();
}
const handlePageChange = (newPage) => {
  serchObj.value.current = newPage; // 确保查询参数更新
  sear(); // 重新加载数据
};
const handleEdit = (index, row) => {
  obj.value=lodash.clone(row);
  editWinVisible.value = ref(true);
  console.log(index,row);
}
const editCancel =()=>{
  obj.value={};
  editWinVisible.value = false;
}
const editCommit=async ()=>{
  await api.edit(obj.value);
  sear();
  editWinVisible.value = false;
  ElMessage.success("修改成功");
}
const handleDelete = (index, row) => {
  console.log(index, row)
}
</script>

<template>
  <!-- 修改点4：确保使用正确的filteredData -->
  <el-table :data="filteredData" style="width: 100%">
    <!-- 修改点5：检查prop是否与API返回字段一致 -->
    <el-table-column label="帖子标题" prop="postTitle" width="240"/>
    <el-table-column label="帖子摘要" prop="postSummary" width="450"/>
    <el-table-column label="帖子状态" prop="status" width="240"/>
    <el-table-column align="right">
      <template #header>
        <el-form :inline="true" :model="serchObj" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="serchObj.status" placeholder="请输入属性" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handlerSearch" >查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:current-page="serchObj.current"
      :page-size="serchObj.limit"
      :total="total"
      :hide-on-single-page="true"
      layout="prev, pager, next"
      @current-change="handlePageChange"
  />
  <!-- 编辑对话框 -->
  <el-dialog v-model="editWinVisible" title="编辑" width="500">
    <el-form :model="obj">
      <el-form-item label="帖子标题" :label-width="100">
        <el-input v-model="obj.postTitle" autocomplete="off" readonly/>
      </el-form-item>
      <el-form-item label="帖子正文" :label-width="100">
        <el-input v-model="obj.postContent" autocomplete="off" type="textarea" style="width: 100%; line-height: 1.5" readonly/>
      </el-form-item>
      <el-form-item label="帖子状态" :label-width="100">
        <el-select placeholder="是否发表" v-model="obj.status">
          <el-option label="草稿" value="draft"></el-option>
          <el-option label="发布" value="published"></el-option>
          <el-option label="修改" value="edit"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>
